
import React, { Component } from "react";
import styles from './user.css'
import { Col, Row, Tooltip,Table, Button, Divider, Descriptions, Progress, Badge, Rate, Typography, Tag, message, Popconfirm, Modal  } from 'antd';
import Breadcrumbs from "../../../components/component/Breadcrumb/breadcrumb";
import {  PlusOutlined, ExclamationCircleFilled } from '@ant-design/icons';
const { Title } = Typography;
const topColResponsiveProps = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 12,
  xl: 6,
  style: { marginBottom: 24 },
};
const { confirm } = Modal;

const nameList =  [ '刘志豪', '吴子康', '张新栋', '张柳福', '赵旭', '张卓', '李连军', '钱小飞', '周福' , '王岐' ]

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {  
      loading:false,    
      data:[],  
      columns: [
        {
          title: '用户ID',
          dataIndex: 'id',
          ellipsis:true,
          width:186,
        },
        {
          title: '用户名',
          dataIndex: 'name',
          width:70
        },
        {
          title: '姓名',
          dataIndex: 'firstName',
          width:70
        },        
        {
          title: '登录名',
          dataIndex: 'loginName',
          width:85
        },
        {
          title:'手机号码',
          dataIndex:'phone',
          ellipsis:true,
          width:100,
        },
        {
          title:'邮箱',
          dataIndex:'email',
          ellipsis:true,
          width:168,
        },        
        {
          title: '部门名称',
          dataIndex: 'departentName',
          width:100, 
        },        
        {
          title: '角色',
          dataIndex: 'count',
          width:86,
          sorter: {
            compare: (a, b) => a.chinese - b.chinese,
            multiple: 3,
          },
          render: (_,row) => {
            return(
              <span>
                {
                  row.name == 'admin' ? <Tag color="volcano">超级用户</Tag>: row.name == 'user04' ?  <Tag color="cyan">管理用户</Tag> : <Tag color="blue">普通用户</Tag>
                }
              </span>
            )
          }          
        },
        {
          title: '权限',
          dataIndex: 'count',
          render: (_,row) => {
            return(
              <span>
                {
                  row.name == 'admin' ? 'rwxr-xr': 'drwxr-xr'
                }
              </span>
            )
          }          
        },        
        {
          title: '归属单位',
          dataIndex: 'institution',
          width:88,
          sorter: {
            compare: (a, b) => a.english - b.english,
            multiple: 1,
          },
        },
        {
          title: '状态',
          dataIndex: 'source', 
          width:73,
          sorter: {
            compare: (a, b) => a.english - b.english,
            multiple: 1,
          },
          render: (_,row) => {
            return(
              <span>
                {
                  row.source > 8 ?  <Badge status="default" text='异常' /> :<Badge status="success" text='正常' />
                }
              </span>
            )
          }           
        },
        {
          title: '创建时间',
          dataIndex: 'creatTime', 
          ellipsis:true,
          width:138,
        }, 
        {
          title: '更新时间',
          dataIndex: 'updateTime', 
          ellipsis:true,
          width:138,
        },           
        {
          title: '操作',
          dataIndex: 'business',
          width:220,
          render: (_,row) => {
            return(
              <span>
                <a className="ml10">修改</a>
                <Popconfirm
                  title="确定删除当前用户吗？"
                  onConfirm={()=>{this.confirmss(row)}}
                  onCancel={ ()=>{this.cancelss(row)} }
                  okText="确定"
                  cancelText="取消"
                >
                  <a style={{color:'#f14c4c'}} className="ml10" >删除</a>
                </Popconfirm>                        
                <a onClick={()=>{this.showConfirm(row)}} className="ml10">重置密码</a>
                <Popconfirm
                  title="确定锁定当前用户吗？"
                  onConfirm={()=>{this.confirms(row)}}
                  onCancel={ ()=>{this.cancels(row)} }
                  okText="确定"
                  cancelText="取消"
                >
                  <a className="ml10" >锁定</a>
                </Popconfirm>                  
              </span>
            )
          }
        },
      ]
    };
  }

  getData = () =>{
    let da = [];
    for (let i = 0; i < 21; i++) {
      da.push(
          {
            key: i,
            id:`${Math.floor(Math.random()*20)}k3F7${Math.floor(Math.random()*20)}w3${Math.floor(Math.random()*20)}dk${Math.floor(Math.random()*10)}7n${Math.floor(Math.random()*1000)}`,
            name: i % 15 == 0 ? 'admin' : `user0${i}`,
            count: Math.floor(Math.random()*1000),
            unit: i % 3 == 0 ? '党组织' : i % 3 == 1 ? '政府组织' : '企业党委',
            institution: i % 3 == 0 ? '城建局' : i % 3 == 1 ? '水利局' : '财政局',
            source: Math.floor(Math.random()*10),
            creatTime:`2023-${Math.floor(Math.random()*10)}-${Math.floor(Math.random()*30)} ${Math.floor(Math.random()*20)}:${Math.floor(Math.random()*60)}:${Math.floor(Math.random()*60)}`,
            updateTime:`2023-${Math.floor(Math.random()*10)}-${Math.floor(Math.random()*30)} ${Math.floor(Math.random()*20)}:${Math.floor(Math.random()*60)}:${Math.floor(Math.random()*60)}`,
            loginName: i % 3 == 0 ? '超级用户' : `用户00${i}`,
            firstName: nameList[Math.floor(Math.random()*10)],
            departentName: i % 3 == 0 ? '系统管理部' : `交付与服务部`,
            phone: `18${Math.floor(Math.random()*10)}${Math.floor(Math.random()*10000)}${Math.floor(Math.random()*10000)}`,
            email: i % 3 == 0 ? `18${Math.floor(Math.random()*10)}${Math.floor(Math.random()*10000)}${Math.floor(Math.random()*10000)}@163.com` : `1${Math.floor(Math.random()*100)}${Math.floor(Math.random()*1000000)}@qq.com`
          }
        )
    }
    this.setState({
      loading: true,
      data:[]
    });
    setTimeout(() => {
      this.setState({
        loading: false,
        data:da
      });    
    }, 1000);
  }

  showConfirm = (row) => {
    confirm({
      title: `确定重置${row.name}用户密码吗?`,
      icon: <ExclamationCircleFilled />,
      content: '重置密码,密码初始化值: admin123456',
      onOk() {
        setTimeout(() => {
          message.success(`用户${row.name}重置密码成功,请重新登陆!`);
        }, 1000);
      },
      onCancel() {
          message.error(`用户${row.name}重置密码!`);
      },
    });
  };

  confirms = (row) =>{
    setTimeout(() => {
      message.success(`用户${row.name}锁定成功!`);
      this.getData();
    }, 1000);
  }

  confirmss = (row) =>{
    setTimeout(() => {
      message.success(`用户删除成功!`);
      this.getData();
    }, 1000);
  }

  cancels = (row) =>{
    message.error(`用户${row.name}取消锁定!`);
  }

  cancelss = (row) =>{
    message.error(`取消删除!`);
  }


  componentDidMount() {
    this.getData();
    window.scrollTo(0, 0);
  }

  onChange = (pagination, filters, sorter, extra) => {
    console.log('params', pagination, filters, sorter, extra);
    this.getData();
  }

  render() {
    const { data, loading, columns } = this.state;
    return (
      <>
        <div style={{marginLeft:0}}>
            <Breadcrumbs props={this.props}></Breadcrumbs>
        </div>
        <Divider />   
        <div style={{margin:20}}>
          <div style={{width:'94%',margin:20}}>
            <Descriptions title="Admin用户权限" bordered>
              <Descriptions.Item label="用户名">admin</Descriptions.Item>
                <Descriptions.Item label="别称">超级管理员</Descriptions.Item>
                <Descriptions.Item label="权限级别">五级</Descriptions.Item>
                <Descriptions.Item label="用户权限名称">权限管理员</Descriptions.Item>
                <Descriptions.Item label="管理范围" span={2}>
                  <Tag color="#87d068">用户管理</Tag>
                  <Tag color="#108ee9">权限管理</Tag>
                  <Tag color="#108ee9">操作</Tag>
                  <Tag color="#108ee9">日志查看</Tag>
                  <Tag color="#f50">分配权限</Tag>
                </Descriptions.Item>
                <Descriptions.Item label="定位" span={3}>
                  <Badge status="success" text="高级" />
                </Descriptions.Item>
            </Descriptions>            
          </div>
          <Divider />
          <div>
            <Title style={{textAlign:'left',marginLeft:40}} level={5}>用户管理列表</Title>
              <div style={{margin:'30px 0 0 30px',}}>
                <Button type="primary" icon={<PlusOutlined />} key="console">新增用户</Button>
              </div>
              <Table style={{margin:20}} columns={columns} dataSource={data} size="middle" 
                loading={loading}
                pagination={
                  {
                    pageSize:5,
                    showTotal:(total) => `共 ${total} 个`,
                  }
                  } />
          </div>
        </div>
      </>
    )
    }
}
